<template>
  <div class="v1" v-myLoading="loading">
    <div class="v1-header">
      <div class="v1-header-logo">
        <lay-icon type="layui-icon-ios"></lay-icon>
        收银系统
      </div>
      <div class="v1-header-info">
        <div class="user">
          <span>欢迎您：{{ model.uid }}</span>
        </div>
        <div class="time">
          <span>{{ timeCompted(nowDate) }}</span>
        </div>
        <div class="opera">
          <lay-popconfirm
            content="退出系统？"
            position="bottom"
            @confirm="logOut"
          >
            <lay-icon type="layui-icon-logout"></lay-icon>
          </lay-popconfirm>
        </div>
      </div>
    </div>
    <div class="v1-content">
      <div class="menu">
        <lay-card
          class="menu-item"
          v-for="menu in menuItems"
          :key="menu.id"
          @click="clickMenu(menu)"
        >
          {{ menu.title }}
        </lay-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { layer } from "@layui/layui-vue";
import moment from "moment";
import { useUserStore } from "@/store";
import { useLoading } from "@/hooks";
import { useRouter } from "vue-router";

const userStore = useUserStore();
const { loading, setLoading } = useLoading();
const router = useRouter();

const nowDate = ref(new Date());

const model = ref({
  branch: "1001", //机构编号
  uid: "admin", //账户
  pw: "123456", //密码
  loginty: "pos", //登录类型-前台固定值"pos"
  terminal: "tt", //终端号loginty=pos时必填
});

const menuItems = ref([
  {
    id: 1,
    title: "前台收银",
    path: "/pos",
  },
  {
    id: 2,
    title: "前台当班",
  },
  {
    id: 3,
    title: "前台交班",
  },
  {
    id: 4,
    title: "交换数据",
  },
  {
    id: 5,
    title: "销售流水",
  },
  {
    id: 6,
    title: "练习收银",
  },
  {
    id: 7,
    title: "修改密码",
  },
  {
    id: 8,
    title: "系统设置",
  },
  {
    id: 9,
    title: "退出系统",
  },
]);

let timer;

const submit = () => {
  console.log(JSON.stringify(model.value));
};

const timeCompted = computed(() => {
  return function (time) {
    return moment(time).format("YYYY-MM-DD HH:mm:ss");
  };
});

const logOut = async () => {
  try {
    let params = {
      loginty: "pos",
    };
    setLoading(true);
    await userStore.logout(params);
    router.push("/login");
    setLoading(false);
    layer.msg("登出成功", { time: 1000, icon: 1 });
  } catch (error) {
  } finally {
    setLoading(false);
  }
};

//点击菜单
const clickMenu = (menu) => {
  switch (menu.id) {
    case 1:
      layer.msg(menu.title);
      router.push(menu.path);
      break;
    case 2:
      layer.msg(menu.title);
      break;
    case 3:
      layer.msg(menu.title);
      break;
    case 4:
      layer.msg(menu.title);
      break;
    case 5:
      layer.msg(menu.title);
      break;
    case 6:
      layer.msg(menu.title);
      break;
    case 7:
      layer.msg(menu.title);
      break;
    case 8:
      layer.msg(menu.title);
      break;
    case 9:
      logOutConfirm();
      break;

    default:
      break;
  }
};

const logOutConfirm = () => {
  layer.confirm("确认退出系统？", {
    btn: [
      {
        text: "确认",
        callback: (id) => {
          logOut();
          layer.close(id);
        },
      },
      {
        text: "取消",
        callback: (id) => {
          layer.close(id);
        },
      },
    ],
  });
};

//每秒更新
const getTime = () => {
  timer = setInterval(() => {
    nowDate.value = new Date();
  }, 1000);
};

//销毁计时器
onBeforeUnmount(() => {
  clearInterval(timer);
});

onMounted(() => {
  getTime();
});
</script>

<style lang="less" scoped>
.v1 {
  width: 100%;
  height: 100%;
  min-width: 800px;
  min-height: 350px;
  background-color: rgba(171, 132, 209, 0.9);

  .v1-header {
    width: 100%;
    height: 60px;
    background: #79559d;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .v1-header-logo {
      font-size: 20px;
      width: 50%;
      height: 100%;
      line-height: 60px;
      margin-left: 60px;
    }

    .v1-header-info {
      width: 50%;
      height: 100%;
      line-height: 60px;
      font-size: 16px;
      padding-right: 60px;
      display: flex;
      justify-content: end;
      align-items: center;

      div {
        margin-right: 20px;
      }

      .opera i {
        cursor: pointer;
      }
    }
  }

  .v1-content {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    align-items: center;

    .menu {
      width: 800px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .menu-item {
        width: 28%;
        height: 28%;
        margin: 10px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .menu-item:hover {
        box-shadow: 0 4px 8px #b5aaaa;
        font-size: 18px;
        color: #b390d6;
        -webkit-transform: translate3d(0, -10px, 0);
        transition: 1s;
        transform: scale(1.05);
      }
    }
  }
}
</style>
